import React from 'react';
import ReactDOM from 'react-dom';

import store from './store'
import { Provider,connect } from 'react-redux'
import { addAction, subAction } from './action'

class Son extends React.Component { 
  state = { 
    num: 1,
    age:100
  }

	sub = () => {
    this.props.sub1()
  }
  
  render () {
    return (<div>
      {this.props.num}
      <button onClick={this.sub}>发送action-sub</button>
			</div>)
  }
} 

const mapDispatchToProps = (dispatch, ownProps) => {
  console.log(dispatch, ownProps)
  return {
    add: () => dispatch(addAction()),
    sub1: () => dispatch(subAction())
  }
}
const mapStateToProps = (state, ownProps) => {
  return {
    num:state.num
  }
}
// 在具体的组件中，如果要获取store中的数据，需要使用高阶组件connect()来对
// 自己的业务组件进行包装
const SonIndex = connect(
  mapStateToProps,
  mapDispatchToProps
)(Son)


class MyCom extends React.Component { 

  render () {
    return (<Provider store={store}>
      <div>
			
      <button onClick={this.add}>发送action-add1</button>
      <SonIndex/>
			</div> </Provider>)
  }
} 



ReactDOM.render(<div>
  <MyCom/>
</div>, 
document.getElementById('root')) 
